<template>
  <div class="completed-orders">
    <!--卡片顶部菜单-->
    <el-row :gutter="24">
      <el-col :span="10">
        <template>
          <div class="block">
            <span class="demonstration" style="margin-right: 20px">选择时间</span>
            <el-date-picker
                v-model="dateRange"
                value-format="yyyy-MM-dd"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
            </el-date-picker>
          </div>
        </template>
      </el-col>
      <el-col :span="5">
        <el-button type="primary" @click="queryByDate">查询</el-button>
        <el-button type="primary" @click="clearDate">清除</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="el-row">
      <el-col :span="4">关键词搜索</el-col>

    </el-row>
    <el-row :gutter="24">
      <el-col :span="3">
        <template>
          <el-select v-model="orderState" placeholder="选择订单状态" clearable>
            <el-option
                v-for="item in stateOptions"
                :label="item.label"
                :value="item.orderState">
            </el-option>
          </el-select>
        </template>
      </el-col>
      <el-col :span="3">
        <template>
          <el-select v-model="orderMethod" placeholder="选择下单方式" clearable>
            <el-option
                v-for="item in methodOptions"
                :label="item.label"
                :value="item.orderMethod">
            </el-option>
          </el-select>
        </template>
      </el-col>
      <el-col :span="3">
        <template>
          <el-select v-model="payChannel" placeholder="选择支付方式" clearable>
            <el-option
                v-for="item in payOptions"
                :label="item.label"
                :value="item.payChannel">
            </el-option>
          </el-select>
        </template>
      </el-col>
      <el-col :span="3">
        <template>
          <el-select v-model="takingStatus" placeholder="选择取餐状态" clearable>
            <el-option
                v-for="item in takingOptions"
                :label="item.label"
                :value="item.takingStatus">
            </el-option>
          </el-select>
        </template>
      </el-col>
      <el-col :span="3">
        <el-input v-model="customerUsername" placeholder="用户名" suffix-icon="el-icon-search"></el-input>
      </el-col>
      <el-col :span="3">
        <el-input v-model="customerPhone" placeholder="电话号码" suffix-icon="el-icon-search"></el-input>
      </el-col>
      <el-col :span="3">
        <el-input v-model="tableName" placeholder="桌台名" suffix-icon="el-icon-search"></el-input>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-card class="box-card" v-for="(item, card) in orderList">
      <!--卡片订单部分-->
      <el-row :gutter="24">
        <!--卡片订单：左部分-->
        <el-col :span="12">
          <div v-for="(it, index) in item.orderDetailsList">
            <el-row :gutter="24">
              <el-col :span="6">
                <img :src="it.dishImg" width="60">
              </el-col>
              <el-col :span="12">{{ it.dishName }}</el-col>
              <el-col :span="6"><span>￥ {{ it.dishPrice.toFixed(2) }}</span></el-col>
            </el-row>
          </div>
        </el-col>
        <!--卡片订单：右部分-->
        <el-col :span="12">
          <el-row :gutter="24">
            <el-col :span="14">
              <div style="margin-top: 20px">
                <p v-show="item.orderMethod==1">送货地址：四川省成都市高新区孵化园</p>
                <p v-show="item.orderMethod==1">客户姓名：{{ item.customerUsername }}</p>
                <p v-show="item.orderMethod==1">联系方式：{{ item.customerPhone }}</p>
                <p v-show="item.orderMethod==1">配送时间：<b style="color: lightblue">{{ item.gmtCreate }}</b></p>
                <p v-show="item.orderMethod==2">就餐方式：<b>堂食</b></p>
                <p v-show="item.orderMethod==2">桌号：{{ item.tableName }}</p>
                <p v-show="item.orderMethod==3">预定种类：<b>订餐</b></p>
                <p>下单时间：{{ item.gmtCreate }}</p>
                <p v-show="item.orderMethod==3">预约时间：{{ item.gmtCreate }}</p>
                <p v-show="item.orderMethod==3">预约人：{{ item.customerUsername }}</p>
                <p v-show="item.orderMethod==3">联系电话：{{ item.customerPhone }}</p>
              </div>
            </el-col>
            <el-col :span="10">
              <p>订单金额：</p>
              <b style="font-size: 30px">￥ {{ item.totalPrice }}</b>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <!--卡片底部部分-->
      <el-row :gutter="24">
        <el-col :span="12">
          <span>订单编号：{{ item.orderNo }}</span>
        </el-col>
        <el-col :span="12">
          <div style="" v-show="item.orderState==0" class="div-taking">
            <el-button type="primary" round @click="takeOrder(item)" >接单</el-button>
            <el-button type="primary" round @click="cancelOrder(item)">拒绝</el-button>
          </div>
          <el-button type="primary" round @click="makeFinished(item)" v-show="item.orderState==2">制作完成</el-button>
          <el-button type="primary" round @click="makeSureOrder(item)" v-show="item.orderState==3">订单完成</el-button>
          <el-button type="primary" round @click="pay(item)" v-show="item.orderState==4">结账<b
            style="margin: 10px">{{ item.tableName }}</b></el-button>
          <el-button type="primary" round @click="releaseTable(item)" v-show="item.orderState==5">释放桌台<b
              style="margin: 10px">{{ item.tableName }}</b></el-button>
          <div class="appointment-button" v-show="item.orderState==1">
            <el-button type="primary" round @click="makeSureAppointment(item)" >确认预约</el-button>
            <el-button type="primary" round @click="cancelAppointment(item)">取消预约</el-button>
          </div>
        </el-col>
      </el-row>
      <!--卡片头部部分-->
      <div slot="header" class="clearfix">
        <el-row :gutter="24">
          <el-col :span="12">点餐信息</el-col>
          <el-col :span="12">客户信息</el-col>
        </el-row>
      </div>
      <!--卡片右上角-->
      <div class="header-right-corner">
        <span class="taking" v-show="item.orderState==0">待接单</span>
        <span class="waiting" v-show="item.orderState==1">待确认</span>
        <span class="making" v-show="item.orderState==2">制作中</span>
        <span class="packing" v-show="item.orderState==3">待取餐</span>
        <span class="not-paid" v-show="item.orderState==4">未支付</span>
        <span class="complete" v-show="item.orderState==5">已完成</span>
      </div>
    </el-card>
    <div style="margin: 10px 0 0 0; height: 30px;">
      <el-pagination
          align="center"
          @current-change="changePage"
          layout="total, prev, pager, next"
          prev-text="上一页"
          next-text="下一页"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import BaseUrl from "@/http/BaseUrl";
import TokenAxios from "@/http/TokenAxios";

export default {
  data() {
    return {
      customerUsername:'',
      customerPhone:'',
      tableName:'',
      orderState: '',
      stateOptions: [
        {
          orderState: '0',
          label: '待接单'
        }, {
          orderState: '1',
          label: '待确认'
        }, {
          orderState: '2',
          label: '制作中'
        }, {
          orderState: '3',
          label: '待取餐'
        }, {
          orderState: '4',
          label: '未支付'
        }, {
          orderState: '5',
          label: '已支付'
        }],
      orderMethod: '',
      methodOptions: [
        {
          orderMethod: '1',
          label: '外卖'
        }, {
          orderMethod: '2',
          label: '自助堂食'
        }, {
          orderMethod: '3',
          label: '预定'
        }],
      takingStatus: '',
      takingOptions: [
        {
          takingStatus: '0',
          label: '保留订单'
        }, {
          takingStatus: '1',
          label: '正常订单'
        }, {
          takingStatus: '2',
          label: '用餐中订单'
        }],
      payChannel: '',
      payOptions: [
        {
          payChannel: '1',
          label: '支付宝'
        }, {
          payChannel: '2',
          label: '微信'
        }, {
          payChannel: '3',
          label: '现金'
        }],
      pickerOptions: {
        shortcuts: [{
          text: '最近三天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      dateRange: [],
      orderDetails: [],
      orderList: [],
      currentPage: 1,
      pageSize: 1,
      total: 0,
      orderUpdate:[]
    }
  },
  methods: {
    takeOrder(key){//点击接单按钮
      this.orderUpdate.orderState = 2;//设置订单状态为：已接单制作中
      if (key.orderMethod==3){
        this.orderUpdate.orderState = 1;//设置订单状态为：已接单（待客户确认预约）
      }
      this.updateOrder(key);
    },
    cancelOrder(key){//点击拒绝订单按钮
      this.$confirm('此操作将永久删除此订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = BaseUrl.FRONT_ORDER+'/orders/'+key.id+'/delete';
        console.log('url:'+url)
        this.axios.get(url).then((response) => {
          let jsonResult = response.data;
          if (jsonResult.state == 20000) {
            this.loadOrderList();
          } else {
            this.$message({
              type: 'error',
              duration:1000,
              message: jsonResult.message
            });
          }
        });
        this.$message({
          type: 'success',
          duration:1000,
          message: '已拒绝订单！'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          duration:1000,
          message: '已取消操作！'
        });
      });

    },
    makeFinished(item){//点击制作完成按钮
      this.orderUpdate.orderState = 3;//设置订单状态为：已完成待取餐
      this.updateOrder(item);
      this.loadOrderList();
      this.$router.push('/call-number')
    },
    makeSureOrder(item){//点击订单完成
      this.orderUpdate.orderState = 4;//设置订单状态为：订单完成（未支付）
      this.orderUpdate.takingStatus = 2;//待取餐订单取餐状态信息：用餐状态
      this.updateOrder(item);
      this.loadOrderList();
    },
    //预约页面
    makeSureAppointment(item){//点击确认预约
      this.orderUpdate.orderState = 2;//设置订单状态为：已确定预约单，待制作
      this.updateOrder(item);
      this.loadOrderList();
    },
    cancelAppointment(item){//点击取消预约
      this.$confirm('此操作将永久删除此订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = BaseUrl.FRONT_ORDER+'/orders/'+key.id+'/delete';
        console.log('url:'+url)
        this.axios.get(url).then((response) => {
          let jsonResult = response.data;
          if (jsonResult.state == 20000) {
            this.loadCheckOrderList();
          } else {
            this.$message({
              type: 'error',
              duration:1000,
              message: jsonResult.message
            });
          }
        });
        this.$message({
          type: 'success',
          duration:1000,
          message: '已取消预约！'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          duration:1000,
          message: '取消操作！'
        });
      });
    },
    pay(item){//点击结账按钮
      let alipayUrl = BaseUrl.FRONT_ORDER+'/alipay/pay';
      let params = {
        outTradeNo: item.id,
        subject: '来客平台订单支付',
        totalAmount: item.totalPrice
      }
      window.open(alipayUrl + '?' + this.qs.stringify(params));
    },
    clearDate() {//清楚日期
      this.dateRange = []
    },
    queryByDate() {//根据时间查询：点击查询按钮
      let page = this.$router.currentRoute.query.page;
      if (!page) {
        page = 1;
      }
      let url = BaseUrl.FRONT_ORDER + '/orders/search-by-condition';
      console.log('url = ' + url);

      let orderSearchInfo = {
        dateRange:this.dateRange,
        orderState: this.orderState,
        orderMethod: this.orderMethod,
        payChannel: this.payChannel,
        tableName: this.tableName,
        takingStatus: this.takingStatus,
        customerUsername:this.customerUsername,
        customerPhone:this.customerPhone,
        pageNum: page
      }
      console.log(orderSearchInfo)
      TokenAxios.post(url, orderSearchInfo).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.orderList = jsonResult.data.list;
          this.total = this.orderList.length;
          this.total = jsonResult.data.total;
          this.pageSize = jsonResult.data.pageSize;
          this.currentPage = jsonResult.data.currentPage;
          if (this.orderList.length == 0){
            this.$message({
              type: 'warning',
              duration: 1200,
              message: '查询结果为空!'
            });
          }
        } else {
          this.$message.error(jsonResult.message);
        }
      });
    },
    search() {//点击搜索按钮
      let page = this.$router.currentRoute.query.page;
      if (!page) {
        page = 1;
      }
      let url = BaseUrl.FRONT_ORDER + '/orders/search-by-condition';
      console.log('url:' + url)

      let orderSearchInfo = {
        dateRange:this.dateRange,
        orderState: this.orderState,
        orderMethod: this.orderMethod,
        payChannel: this.payChannel,
        tableName: this.tableName,
        takingStatus: this.takingStatus,
        customerUsername:this.customerUsername,
        customerPhone:this.customerPhone,
        pageNum: page
      }
      console.log(orderSearchInfo)
      TokenAxios.post(url, orderSearchInfo).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.orderList = jsonResult.data.list;
          this.total = this.orderList.length;
          this.total = jsonResult.data.total;
          this.pageSize = jsonResult.data.pageSize;
          this.currentPage = jsonResult.data.currentPage;
          if (this.orderList.length == 0){
            this.$message({
              type: 'warning',
              duration: 1200,
              message: '查询结果为空!'
            });
          }
        } else {
          this.$message({
            type: 'error',
            duration: 1200,
            message: jsonResult.message
          });
        }
      });
    },
    changePage(page) {//分页选择器改变
      this.$router.push('?page=' + page);
      this.loadOrderList();
    },
    handleClick(tab) {//卡片顶部菜单栏点击
      let url = this.$route.fullPath;
      if (url.indexOf("?") !== -1) {
        this.$router.push('');
      }
      this.loadOrderList();
    },
    loadOrderList() {//加载订单列表
      let page = this.$router.currentRoute.query.page;
      if (!page) {
        page = 1;
      }
      let url = BaseUrl.FRONT_ORDER + '/orders/search-by-condition';
      console.log('url:' + url)

      let orderSearchInfo = {
        dateRange:this.dateRange,
        orderState: this.orderState,
        orderMethod: this.orderMethod,
        payChannel: this.payChannel,
        tableName: this.tableName,
        takingStatus: this.takingStatus,
        customerUsername:this.customerUsername,
        customerPhone:this.customerPhone,
        pageNum: page
      }
      TokenAxios.post(url, orderSearchInfo).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.orderList = jsonResult.data.list;
          this.total = this.orderList.length;
          this.pageSize = jsonResult.data.pageSize;
          this.currentPage = jsonResult.data.currentPage;
          if (this.orderList ==null){
            this.$message({
              type: 'warning',
              duration: 1200,
              message: '查询结果为空!'
            });
          }
        } else {
          this.$message({
            type: 'error',
            duration: 1200,
            message: jsonResult.message
          });
        }
      });
    },
    releaseTable(item) {//释放桌台
      // let url = BaseUrl.FRONT_ORDER+'/orders/completed/by-method/';
      // console.log('url:'+url)
      // this.axios.get(url).then((response) => {
      //   let jsonResult = response.data;
      //   if (jsonResult.state == 20000) {
      //   } else {
      //     this.$message.error(jsonResult.message);
      //   }
      // });
    },
    updateOrder(order){//更新订单状态
      let url = BaseUrl.FRONT_ORDER+'/orders/'+order.id+'/update';
      console.log('url:'+url)

      TokenAxios.post(url,this.orderUpdate).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            duration:1200,
            type:"success",
            message:'操作订单成功！'
          });
          this.loadOrderList();
        } else {
          this.$message({
            type: 'error',
            duration:1000,
            message: jsonResult.message
          });
        }
      });
    },
  },
  mounted() {
    this.loadOrderList();
  }
}
</script>
<style scoped lang="less">
.completed-orders {
  font-size: 20px;
}

/deep/ .el-tabs {
  .el-tabs__item {
    font-size: 20px !important;
  }
}

.box-card {
  position: relative;
  overflow: hidden;

  .appointment-button button{
    width: 150px;
  }
  button {
    width: 300px;
    height: 45px;
    font-size: 20px;
    margin-left: 60px;
  }
}

.header-right-corner {
  width: 150px;
  height: 150px;
  position: absolute;
  //background-color: #048816;
  top: -75px;
  right: -75px;
  transform: rotate(45deg);

  .taking {
    position: absolute;
    bottom: 0;
    display: block;
    font-size: 22px;
    color: #ffffff;
    background: #7e9a07;
    width: 150px;
    text-align: center;
  }
  .complete {
    position: absolute;
    bottom: 0;
    display: block;
    font-size: 22px;
    color: #ffffff;
    background: #7e88e1;
    width: 150px;
    text-align: center;
  }
  .making{
    position: absolute;
    bottom: 0;
    display: block;
    font-size: 22px;
    color: #ffffff;
    background: #fdbd0d;
    width: 150px;
    text-align: center;
  }
  .packing{
    position: absolute;
    bottom: 0;
    display: block;
    font-size: 22px;
    color: #ffffff;
    background: #048816;
    width: 150px;
    text-align: center;
  }
  .waiting{
    position: absolute;
    bottom: 0;
    display: block;
    font-size: 22px;
    color: #ffffff;
    background: #f57842;
    width: 150px;
    text-align: center;
  }
  .not-paid{
    position: absolute;
    bottom: 0;
    display: block;
    font-size: 22px;
    color: #ffffff;
    background: #a41402;
    width: 150px;
    text-align: center;
  }
}

.el-row {
  margin-top: 20px;
}
.box-card .el-row{
  margin-top: 0;
}
.div-taking {
  margin-top: 0;

  button {
    width: 120px;
  }
}

</style>